<!--模态框-->
<div id="modalAdd" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">添加试题</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!--javascript:void(0);设置form为无动作-->
                <form action="javascript:void(0);" class="form-horizontal">
                    <div class="form-group row">
                        <label class="control-label col-md-3">试题类型</label>
                        <div class="col-md-8">
                            <select id="option" class="form-control" v-model:value="model.type"/>
                                <option class="form-control" value="singleChoice">单项选择</option>
                                <option class="form-control" value="multipleChoice">多项选择</option>
                                <option class="form-control" value="fillBlank">填空</option>
                                <option class="form-control" value="judge">判断</option>
                                <option class="form-control" value="shortAnswer">简答</option>
                                <option class="form-control" value="programming">编程</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">试题阶段</label>
                        <div class="col-md-8">
                            <select class="form-control" v-model:value="model.flag"/>
                                <option class="form-control" >Java_SE</option>
                                <option class="form-control" >Java_EE</option>
                                <option class="form-control" >Java_Framework</option>
                                <option class="form-control" >Front_Js</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">试题内容</label>
                        <div class="col-md-8">
                            <input
                                    class="form-control"
                                    type="text"
                                    v-model="model.content"
                                    placeholder="请输入问题内容"
                            />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">分值</label>
                        <div class="col-md-8">
							<input id="number" type="number" step="0.5" class="form-control" v-model="model.score" />
                        </div>
                    </div>
                    <div id="optionA" class="form-group row">
                        <label class="control-label col-md-3">选项 A</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.optionA" placeholder="请输入选项A">
                        </div>
                    </div>
                    <div id="optionB" class="form-group row">
                        <label class="control-label col-md-3">选项 B</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.optionB" placeholder="请输入选项B">
                        </div>
                    </div>
                    <div id="optionC" class="form-group row">
                        <label class="control-label col-md-3">选项 C</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.optionC" placeholder="请输入选项C">
                        </div>
                    </div>
                    <div id="optionD" class="form-group row">
                        <label class="control-label col-md-3">选项 D</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.optionD" placeholder="请输入选项D">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">参考答案</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.referenceAnswer" placeholder="请输入参考答案">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-md-3">备注</label>
                        <div class="col-md-8">
                            <input class="form-control" type="text" v-model="model.comment" placeholder="备注">
                        </div>
                    </div>
                    <div id="picture" class="form-group row" >
                        <label class="control-label col-md-4">添加图片</label>
                            <input type="hidden" v-model="model.picture"/>
                        <div class="col-md-8">
                            <input type="file" id="uploadImage" name="image"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="addModel()">
                    添加
                </button>
            </div>
        </div>
    </div>
</div>

<!-- bootstrap-progressbar -->
<script src="/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#option").change(function(){
            if($(this).find("option:selected").val() == "singleChoice"){
                $("#optionA").show();
                $("#optionB").show();
                $("#optionC").show();
                $("#optionD").show();
                $("#picture").show();
            }
            if($(this).find("option:selected").val() == "multipleChoice"){
                $("#optionA").show();
                $("#optionB").show();
                $("#optionC").show();
                $("#optionD").show();
                $("#picture").show();
            }
            if($(this).find("option:selected").val() == "fillBlank"){
                $("#optionA").hide();
                $("#optionB").hide();
                $("#optionC").hide();
                $("#optionD").hide();
                $("#picture").hide();
            }
            if($(this).find("option:selected").val() == "judge"){
                $("#optionA").hide();
                $("#optionB").hide();
                $("#optionC").hide();
                $("#optionD").hide();
                $("#picture").hide();
            }
            if($(this).find("option:selected").val() == "shortAnswer"){
                $("#optionA").hide();
                $("#optionB").hide();
                $("#optionC").hide();
                $("#optionD").hide();
                $("#picture").show();
            }
            if($(this).find("option:selected").val() == "programming"){
                $("#optionA").hide();
                $("#optionB").hide();
                $("#optionC").hide();
                $("#optionD").hide();
                $("#picture").show();
            }
        });
    });
</script>
